<template>
  <el-row class="details fff">
    <el-row>
      <el-form
        ref="addForm"
        :inline="true"
        :rules="rules"
        :model="addForm"
        label-position="top"
        class="search"
      >
        <el-col :span="8">
          <el-form-item label="仓库编码">
            <el-input
              v-model="addForm.code"
              disabled
              placeholder="请输入"
            /> </el-form-item></el-col>
        <el-col :span="8">
          <el-form-item label="仓库名称" prop="name">
            <el-input
              v-model="addForm.name"
              placeholder="请输入"
              clearable
              max="10"
            /> </el-form-item></el-col>
        <el-col :span="8">
          <el-form-item label="仓库类型" prop="type">
            <el-select v-model="addForm.type" placeholder="请选择" clearable>
              <el-option
                v-for="(item, index) in warehouseType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="17">
          <el-form-item label="省/市/区" prop="selectedOptions" clearable>
            <el-cascader
              v-model="addForm.selectedOptions"
              trigger="hover"
              size="large"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="17">
          <el-form-item label="详细地址">
            <el-input
              v-model="addForm.address"
              placeholder="请输入"
              clearable
            /> </el-form-item></el-col>

        <el-col :span="7">
          <el-form-item label="仓库状态" prop="status">
            <el-radio-group v-model="addForm.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item></el-col>
        <el-col :span="8">
          <el-form-item
            label="仓库面积"
            class="formInfoTip"
          >
            <el-input
              v-model.number="addForm.surface"
              type="number"
              placeholder="请输入"
            ><template slot="append">m²</template></el-input>
          </el-form-item></el-col>
        <el-col :span="8">
          <el-form-item label="负责人" prop="personName">
            <el-input
              v-model="addForm.personName"
              placeholder="请输入"
              clearable
            /> </el-form-item></el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="phone">
            <el-input
              v-model="addForm.phone"
              type="number"
              placeholder="请输入"
              clearable
            /> </el-form-item></el-col> </el-form></el-row>

    <el-row class="submit">
      <el-button @click="$router.push('/manage-base-info/warehouse')">返回</el-button>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-row>
  </el-row>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { warehouseType } from '@/constant/warehouse'
import { nextCodeFactory } from '@/api/codeFactory'
import { addWarehouse, setWarehouse, getWarehouseDetails } from '@/api/wareHouse'
export default {
  data() {
    return {
      options: regionData,
      warehouseType,
      addForm: {
        address: null,
        area: null,
        city: null,
        code: null,
        location: null,
        name: null,
        personName: null,
        phone: null,
        province: null,
        status: '1',
        surface: null,
        type: null,
        selectedOptions: []

      },
      rules: {
        name: { required: true, max: 5, message: '请输入仓库名称', trigger: 'blur' },
        type: { required: true, message: '请输入仓库类型', trigger: 'blur' },
        selectedOptions: { required: true, message: '请输入地址', trigger: 'blur' },
        status: { required: true, message: '请输入仓库状态', trigger: 'blur' },
        personName: { required: true, message: '请输入负责人', trigger: 'blur' },
        phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的电话号码' }
        ]

      }
    }
  },
  async created() {
    if (this.$route.params.id !== 'null') {
      const { data } = await getWarehouseDetails(this.$route.params.id)
      this.addForm = data
      this.addForm.selectedOptions = [data.province, data.city, data.area]
    } else {
      this.nextCodeFactory()
    }
  },
  methods: {
    async nextCodeFactory() {
      const { data } = await nextCodeFactory('CK')
      this.addForm.code = data
    },
    onSubmit() {
      this.addForm.location = this.addForm.selectedOptions.map((item, i) => CodeToText[this.addForm.selectedOptions[i]]).join('/')
      this.addForm.province = this.addForm.selectedOptions[0]
      this.addForm.city = this.addForm.selectedOptions[1]
      this.addForm.area = this.addForm.selectedOptions[2]
      this.$refs.addForm.validate(async valid => {
        if (valid) {
          delete this.addForm.selectedOptions
          if (this.$route.params.id === 'null') {
            await addWarehouse(this.addForm)
            this.$message.success('新增成功')
          } else {
            await setWarehouse(this.addForm)
            this.$message.success('修改成功')
          }
          this.$router.push('/manage-base-info/warehouse')
        } else {
          this.$message.warning('请完善表单')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.submit {
  border-top: 1px solid #f5efee;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  .el-button {
    width: 170px;
    margin: 20px;
  }
}
</style>
